<template>
    <div class="container">
        <p class="voate">如果帮到您，请投大数据与互联网学院一票：

                <el-button  class="voate" type="text" @click="voate">
                https://vote.sztu.edu.cn(请用微信浏览器打开)
                </el-button>
  
        </p>
        <div class="new_container">
        <div class="form" v-show="ifsee">
            <h2>信息填写</h2>
            <el-button type="text" @click="$router.push({path:'/step'})">耗材明细导入方法</el-button>
                <el-form ref="form1" :model="form1" :rules="rules" label-position="top" label-width="auto" size="medium">
                    <el-form-item label="物品类型 (低值耐用品1/耗材2)" prop="item_type">
                        <el-input v-model="form1.item_type"></el-input>
                    </el-form-item>
                    <el-form-item label="领用人工号" prop="employee_name">
                        <el-input v-model="form1.employee_name"></el-input>
                    </el-form-item>
                    <el-form-item label="存放地编号" prop="storage_id">
                        <el-button type="text" @click="$router.push({path:'/path'})">存放地编码查询方法</el-button>
                        <el-input v-model="form1.storage_id"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="文件上传" prop="list">
                        <el-upload
                        ref="down"
                            :limit="10"
                            :multiple="true"
                            :on-exceed="handleExceed"
                            class="upload-demo"
                            action="/"
                            :auto-upload="false"
                            :on-change="handleChange"
                            accept=".pdf"
                            :on-remove="handleChange"
                            :file-list="fileList">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">最多上传10个文件</div>
                        </el-upload>
                    </el-form-item>
                
                </el-form>
            </div>
            <div :class="submitKind">
                <el-button type="primary" @click="onSubmit1" :item="item">{{item}}</el-button>
            </div>
            <el-button type="text" @click="questionLink" v-show="ifsee">
        问题反馈
            </el-button>
            
        </div>
        <p>Developed by 深圳技术大学-大数据与互联网学院-5G物联网通信与行业应用实验室</p>
    </div>
</template>

<script>
export default{

  data(){
      return{
           ifsee:true,
           submitKind:'kind1',
            id:'',
            item:'确定',
            form1:{
                item_type:'',
                employee_name:'',
                storage_id:'',
                list:[],
            },
            rules:{
                item_type:[{required:true,message:'不能为空',trigger:'blur'}],
                employee_name:[{required:true,message:'不能为空',trigger:'blur'}],
                storage_id:[{required:true,message:'不能为空',trigger:'blur'}],
                list:[{required:true,message:'不能为空',trigger:'blur'}]
           }
      }
  },
    methods:{
        handleChange(file,fileList){
            let that=this
            this.form1.list=[ ]
            for (var value of fileList){
                that.form1.list.unshift({file:value.raw})
            }  
        },
        questionLink(){
            window.location.href='https://docs.qq.com/form/page/DVUlzclFieE5jUkFq'
        },
        voate(){
            window.location.href='https://vote.sztu.edu.cn'
        },
        onSubmit1(){
        let that=this
        let div = document.querySelector('.new_container');
        if(that.item=='确定'){
            
            let data={
                title:that.form1.title,
                item_type:that.form1.item_type,
                employee_name:that.form1.employee_name,
                storage_id:that.form1.storage_id
            }
            that.$refs['form1'].validate(valid=>{
                if (valid) {
                    that.$http('/NewOperation', 'POST', data, true, function(resp) {
                        that.id = resp.id;
                        let promises = [];
                        for (var value of that.form1.list) {
                        let formdata = new FormData();
                        formdata.append('id', that.id);
                        formdata.append('data', value.file);

                        let promise = new Promise(function(resolve, reject) {
                            that.$http_formdata('/Upload', 'POST', formdata, true, function(resp) {
                            resolve(resp);
                            }, function(errResp) {
                            reject(errResp);
                            });
                        });

                        promises.push(promise);
                        }
                        Promise.all(promises).then(function(results) {
                            that.$message.success('上传成功');
                            that.item = '下载';
                            that.ifsee = false;
                            that.$refs['down'].clearFiles();
                            that.$refs['form1'].resetFields();
                            div.style.height="0px";
                            that.submitKind = 'kind2';
                        }).catch(function(error) {
                            that.$message.error('上传失败，请上传正确的发票pdf文件');
                            that.$refs['down'].clearFiles();
                        });
                    });
                }
            })
        }


        else{
            window.location=this.$baseUrl+"/GetZip?"
            +"&operation_id="+that.id
            that.item='确定'
            that.ifsee=true
            that.submitKind='kind1'
            div.style.height="";
        }



    },
    },
    created(){ 
    }

}

</script>

<style lang="less" scoped>
*{
-moz-user-select:none; /*火狐*/
-webkit-user-select:none; /*webkit浏览器*/
-ms-user-select:none; /*IE10*/
-khtml-user-select:none; /*早期浏览器*/
user-select:none;
  
}
.container{
   
   // position:absolute;
   //min-width:900px;
    margin:100px auto;
    left:0px;
    right:0px;
    //display:flex;
    // flex-direction: column;
    // justify-content: center;
    // align-items:center;
}
.voate{
    font-size:large;
}
.new_container{
    background-color: rgb(255, 255, 255);
    padding:50px;
    
    width:60%;
    min-width:800px;
    margin:0px auto;
    border-radius: 8px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    //position: relative;;
    //transition: height 5s;

}
.new_container:hover{
    height:0px;
}
.form{
    width:100%;
}

.kind1{
    display:flex;
    justify-content: end;
   // float: right;
   
 }
 .kind2{
    display:flex;
    justify-content: center;
    transition: all 5s;
 }

p{
    color: rgb(134, 131, 131);
    text-align:center;
}
.cell{
  text-align: center;
}



</style>